<template>
  <div class="max-w-4xl mx-auto p-4">
    <a-card>
      <a-typography-title :level="2">文本去空格工具</a-typography-title>
      
      <a-form layout="vertical">
      <!-- 输入区域 -->
        <a-form-item>
          <a-textarea
            v-model:value="inputText"
          placeholder="请输入要处理的文本..."
            :rows="6"
            :auto-size="{ minRows: 6, maxRows: 12 }"
            class="font-mono"
          />
        </a-form-item>

      <!-- 选项区域 -->
        <a-form-item>
          <a-space wrap>
            <a-checkbox v-model:checked="options.trimStart">
              去除开头空格
            </a-checkbox>
            <a-checkbox v-model:checked="options.trimEnd">
              去除结尾空格
            </a-checkbox>
            <a-checkbox v-model:checked="options.removeMultipleSpaces">
              合并连续空格
            </a-checkbox>
            <a-checkbox v-model:checked="options.removeAllSpaces">
              去除所有空格
            </a-checkbox>
            <a-checkbox v-model:checked="options.removeEmptyLines">
              去除空行
            </a-checkbox>
          </a-space>
        </a-form-item>

      <!-- 操作按钮 -->
        <a-form-item>
          <a-button type="primary" @click="processText">
          处理文本
          </a-button>
        </a-form-item>

      <!-- 统计信息 -->
        <template v-if="stats.show">
          <a-divider>统计信息</a-divider>
          <a-descriptions :column="{ xs: 1, sm: 2, md: 4 }">
            <a-descriptions-item label="原始长度">
              <a-statistic
                :value="stats.originalLength"
                :value-style="{ fontFamily: 'monospace' }"
              />
            </a-descriptions-item>
            <a-descriptions-item label="处理后长度">
              <a-statistic
                :value="stats.processedLength"
                :value-style="{ fontFamily: 'monospace' }"
              />
            </a-descriptions-item>
            <a-descriptions-item label="移除字符数">
              <a-statistic
                :value="stats.removedCount"
                :value-style="{ fontFamily: 'monospace' }"
              />
            </a-descriptions-item>
            <a-descriptions-item label="减少比例">
              <a-statistic
                :value="stats.reductionPercentage"
                :suffix="`%`"
                :precision="2"
                :value-style="{ fontFamily: 'monospace' }"
              />
            </a-descriptions-item>
          </a-descriptions>
        </template>

      <!-- 结果区域 -->
        <template v-if="outputText">
          <a-divider>处理结果</a-divider>
          <a-space direction="vertical" class="w-full">
            <div class="flex justify-end">
              <a-tooltip :title="copied ? '已复制！' : '复制到剪贴板'">
                <a-button
                  type="text"
            @click="copyToClipboard"
                  :icon="copied ? h(CheckOutlined) : h(CopyOutlined)"
                >
                  {{ copied ? '已复制' : '复制' }}
                </a-button>
              </a-tooltip>
        </div>
            <a-card class="w-full bg-gray-50 dark:bg-gray-700">
              <pre class="font-mono whitespace-pre-wrap break-all">{{ outputText }}</pre>
            </a-card>
          </a-space>
        </template>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const inputText = ref('');
const outputText = ref('');
const copied = ref(false);

const options = reactive({
  trimStart: true,
  trimEnd: true,
  removeMultipleSpaces: true,
  removeAllSpaces: false,
  removeEmptyLines: false
});

const stats = reactive({
  show: false,
  originalLength: 0,
  processedLength: 0,
  removedCount: 0,
  reductionPercentage: '0.00'
});

const processText = () => {
  if (!inputText.value) {
    message.warning('请输入要处理的文本');
    return;
  }

  let result = inputText.value;
  
  // 处理每一行
  result = result.split('\n').map(line => {
    let processed = line;
    
    if (options.trimStart) {
      processed = processed.trimStart();
    }
    
    if (options.trimEnd) {
      processed = processed.trimEnd();
    }
    
    if (options.removeMultipleSpaces) {
      processed = processed.replace(/\s+/g, ' ');
    }
    
    if (options.removeAllSpaces) {
      processed = processed.replace(/\s/g, '');
    }
    
    return processed;
  }).join('\n');

  // 去除空行
  if (options.removeEmptyLines) {
    result = result.split('\n').filter(line => line.trim().length > 0).join('\n');
  }

  // 更新统计信息
  stats.show = true;
  stats.originalLength = inputText.value.length;
  stats.processedLength = result.length;
  stats.removedCount = stats.originalLength - stats.processedLength;
  stats.reductionPercentage = ((stats.removedCount / stats.originalLength) * 100).toFixed(2);

  outputText.value = result;
  message.success('处理完成！');
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    message.success('复制成功！');
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    message.error('复制失败，请重试');
    console.error('复制失败:', err);
  }
};
</script> 

<style scoped>
.ant-card {
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 24px;
}

.dark .ant-card {
  background-color: #1f2937;
}
</style> 